<template>
<!-- 庭审大数据 -->
 <div class="main">
    <div class="left">
      <box  title="在线庭审占比情况">
        <!-- <listTable :title="stageDataTitle" :data='stageData'></listTable> -->
        <!-- <lineChart :title="trialDataOfMonth_title" :data='allData.trialDataOfMonth'></lineChart> -->
        <!-- {{allData.trialDataOfMonth}} -->
        <barLineChart :title="trialDataOfMonth_title" :data='allData.trialDataOfMonth'  ></barLineChart>
      </box>
      <box title="在线庭审服务群众(含代理人)">
        <!-- <pieChart :title="briefDataListTilte" :data='briefDataList'></pieChart> -->
        <listTable_2 :title="trialNumTitle" :data='allData.personNumData' ></listTable_2>

      </box>
    </div>
    <div class="center">
      <box>
        <centerBox :data="allData.courtTrialData" :title="centerTitle_2" :data_top="allData" :title_top="centerTitle_1"></centerBox>
      </box>
    </div>
    <div class="right">
      <box title="在线庭审案件主要案由分布">
        <pieChart :title="trialBriefDataListTilte" :data='allData.trialBriefDataList'></pieChart>
        <!-- <barChart :title="caseNumTitle" :data='caseNumDataOfMonth'   ></barChart> -->
      </box>
      <box title="新冠疫情以来服务群众(含代理人)">
        <!-- {{allData.epidemicData}} -->
        <listTable :title="personNumDataTitle" :data='allData.epidemicData' ></listTable>
      </box>
    </div>


 </div>
</template>
<script>
import { trialData } from '@/api/index.js'
import box from '_components/box/index.vue'
import echarts from '_components/echarts/echarts.vue'
import pieChart from '@/views/boxContent/pieChart.vue'
import barLineChart from '@/views/boxContent/barLineChart.vue'
import lineChart from '@/views/boxContent/lineChart.vue'
import semiCircleChart from '@/views/boxContent/semiCircleChart.vue'
import centerBox from '@/views/boxContent/centerBox.vue'
import listTable from '@/views/boxContent/listTable.vue'
import listTable_2 from '@/views/boxContent/listTable_2.vue'

export default {
  name: 'bigDataCourt',
  components: {
    box,
    echarts,
    listTable,
    listTable_2,
    pieChart,
    barLineChart,
    lineChart,
    semiCircleChart,
    centerBox
  },
  data () {
    return {
      //在线庭审服务群众(含代理人)
      trialNumTitle:[
        {name:"总人次",value:"allPersonNum"},
        {name:"厦门以外地区人次",value:"partPersonNum"},

      ],
      personNumData:[],
      // 各审判阶段全在线案件数:	stageData
      personNumDataTitle:[
        {name:"总人次",value:"allPersonNum"},
        {name:"厦门以外地区人数",value:"partPersonNum"},
        {name:"累计减少群众开庭往返次数",value:"trialNum"},
        {name:"节约群众时间",value:"duration"},
      ],
      //案由分布
      trialBriefDataList:[],
      trialBriefDataListTilte:['name','num'],
      //全在线诉讼平台案件量（月份显示）
      caseNumDataOfMonth:[],
      caseNumTitle:[
       'month','num'
      ],
      //适用率（送达适用率、庭审适用率）
      trialDataOfMonth:[],
      trialDataOfMonth_title:['month','count','openNum','percent'],


      // 案件总数：
      allCaseCount:0,
      // 服务人数：
      allPersonCount:0,
      // 殿前，院部。禾山。自贸区：courtData
      // dqCount: 65,  殿前法庭
      // ybCount: 55,  院部
      // hsCount: 53,   禾山法庭
      // zmqCount: 32  自贸区法庭

      centerTitle_1:[
        {name:"2022年度全在线案件数",value:'trialNum',unit:'件'},
        {name:"在线庭审累计开庭时长",value:'duration',unit:'分钟'},
        {name:"在线开庭占比",value:'trialPercent',unit:'%'},
        {name:"折算天数",value:'durationDay',unit:'天'},
      ],
      centerTitle_2:[
        {name:"殿前法庭",value:'dqCount'},
        {name:"院部",value:'ybCount'},
        {name:"禾山法庭",value:'hsCount'},
        {name:"自贸区法庭",value:'zmqCount'},
      ],
      allData:{},
    }
  },
  props: {
  },

  created () {
    this.getData()
      this.centerTitle_1[0].name=`${this.$store.state.year}年度全在线案件数`

  },
  mounted () {
  },
  watch:{
    "$store.state.year"(a)
    {
      this.getData()
      this.centerTitle_1[0].name=`${a}年度全在线案件数`

    }
  },
  methods: {
    getData()
    {
      let obj = {
        year:this.$store.state.year
      }
      trialData(obj).then(({code,data,msg})=>{
        data.trialDataOfMonth.forEach(e => {
          if(e.percent)
          {
            let a = e.percent.split('%')
            // console.log(a)
            e.percent=a[0]*1
          }else{
            e.percent=0
          }
        });

        this.allData=data

        this.allCaseCount=data.allCaseCount
        this.allPersonCount=data.allPersonCount

      }).catch(res=>{


      })
    }
  }
}
</script>

<style scoped >


.center >>> .box
{
  background-image:url(@/assets/image/framebigcenter.png);
  background-size: 100% 100%;
  border: none;
  height: 100%;



}
.center
{
  /* width: 42%; */
  flex: 10;
  overflow: auto;
  height: 100%;
  display: flex;
    flex-direction: column;
}
.left,.right
{
  flex: 6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.main
{
  flex: 1 1 0%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
</style>
